<template>
    <div class="property-panel" ref="propertyPanel">
        <Form ref="form" :model="form" inline :label-width="80">
            <FormItem label="节点ID">
                <Input type="text" v-model="form.id" disabled />
            </FormItem>
            <FormItem label="节点名称">
                <Input type="text" :value="form.name" @input="nameChange" />
            </FormItem>
            <FormItem label="节点颜色">
                <ColorPicker v-model="form.color" @on-change="colorChange" recommend />
            </FormItem>
            <FormItem label="节点人员" v-if="userTask">
                <Select v-model="form.userType" style="width:200px">
                    <Option v-for="item in userType" :value="item.value" :key="item.value">
                        {{ item.label }}</Option>
                </Select>
            </FormItem>
            <FormItem label="指定人员" v-if="userTask && form.userType === 'assignee'">
                <Select v-model="form.assignee" style="width:200px"
                        @on-change="(value) => addUser({assignee: value})">
                    <Option v-for="item in users" :value="item.value" :key="item.value"
                            :label="item.label" />
                </Select>
            </FormItem>
            <FormItem label="角色/岗位" v-else-if="userTask && form.userType === 'candidateGroups'">
                <Select v-model="form.candidateGroups" style="width:200px"
                        @on-change="(value) => addUser({candidateGroups: value})">
                    <Option v-for="item in roles" :value="item.value" :key="item.value"
                            :label="item.label" />
                </Select>
            </FormItem>
        </Form>
    </div>
</template>

<script>
export default {
    name: "Panel",
    props: {
        modeler: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            userType: [
                { value: 'assignee', label: '指定人员' },
                // { value: 'candidateUsers', label: '候选人员' },
                { value: 'candidateGroups', label: '角色/岗位' },
            ],
            model: '',
            form: {
                id: "",
                name: "",
                color: null
            },
            element: {}, // 当前选中的元素
            users: [
                { value: "zhangsan", label: "张三" },
                { value: "lisi", label: "李四" },
                { value: "wangwu", label: "王五" }
            ],
            roles: [
                { value: "manager", label: "经理" },
                { value: "personnel", label: "人事" },
                { value: "charge", label: "主管" }
            ]
        };
    },
    computed: {
        userTask() {
            if (!this.element) return;
            return this.element.type === "bpmn:Task";
        },
        sequenceFlow() {
            if (!this.element) {
                return;
            }
            return this.element.type === "bpmn:SequenceFlow";
        }
    },
    mounted() {
        this.handleModeler();
    },
    methods: {
        handleModeler() {
            // 防止重复监听
            this.modeler.off("selection.changed", e => { })
            // 监听节点选择变化
            this.modeler.on("selection.changed", e => {
                const element = e.newSelection[0];
                this.element = element;
                if (!element) return;
                console.log(element);
                this.form = {
                    ...element.businessObject,
                    ...element.businessObject.$attrs
                };
                if (this.form.userType === "candidateUsers") {
                    this.form["candidateUsers"] =
                        this.form["candidateUsers"].split(",") || [];
                }
            });
            // 防止重复监听
            this.modeler.off("element.changed", e => { })
            //  监听节点属性变化
            this.modeler.on("element.changed", e => {
                const { element } = e;
                if (!element) return;
                //  新增节点需要更新回属性面板
                if (element.id === this.form.id) {
                    this.form.name = element.businessObject.name;
                    this.form = { ...this.form };
                }
            });
        },
        // 属性名称
        nameChange(name) {
            const modeling = this.modeler.get("modeling");
            modeling.updateLabel(this.element, name);
        },
        // 属性颜色
        colorChange(color) {
            const modeling = this.modeler.get("modeling");
            modeling.setColor(this.element, {
                fill: null,
                stroke: color
            });
            modeling.updateProperties(this.element, { color: color });
        },
        // 任务节点配置人员
        addUser(properties) {
            this.updateProperties(
                Object.assign(properties, {
                    userType: Object.keys(properties)[0]
                })
            );
        },
        // 切换人员类型
        typeChange() {
            const types = ["assignee", "candidateUsers", "candidateGroups"];
            types.forEach(type => {
                delete this.element.businessObject.$attrs[type];
                delete this.form[type];
            });
        },
        // 在这里我们封装一个通用的更新节点属性的方法
        updateProperties(properties) {
            const modeling = this.modeler.get("modeling");
            modeling.updateProperties(this.element, properties);
        }
    }
};
</script>

<style lang="less" scoped>
.property-panel {
    position: absolute;
    right: 0px;
    top: 0px;
    border-left: 1px solid #cccccc;
    padding: 20px 0;
    width: 300px;
    height: 100%;
}
</style>
